<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>房屋信息</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/libs/layui/css/layui.css"/>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/module/admin.css?v=318"/>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #mainPage {
            width: 100%;
            height: auto;
        }

        #mainPage > #top {
            margin: 0 auto;
            width: 1517px;
        }

        #top-div li {
            float: left;
        }

        #top {
            width: 1517px;
            background-color: white;
        }

        #top-div {
            margin: 0 auto;
            height: 80px;
            width: 1170px;
        }

        #top-div-left {
            width: 600px;
            display: inline-block;
        }

        #top-logo {
            width: 80px;
            height: 80px;
            display: inline-block;
            position: relative;
        }

        #top-logo img {
            height: 42px;
            align-content: center;
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            margin-left: 20px;
        }

        #top-div-left li {
            padding: 30px 12px;
            font-size: 15px;
            font-weight: 800;
        }

        #top-div-right {
            float: right;
        }

        .goto-login {
            padding: 30px 12px 30px 0;
        }

        .goto-login span {
            font-weight: 800;
            color: #140c40;
            transition: color .3s, background .3s;
            font-size: 12px;
        }

        .goto-login a {
            list-style-type: none;
        }

        #log-reg {
            width: 20px;
            height: 20px;
            margin-top: 27px;
            margin-right: 5px;

        }

        .goto-login img {
            width: 30px;
            height: 30px;
            margin-top: 20px;
        }

        #is-login {
            line-height: 80px;
            cursor: pointer;
        }

        #is-login img {
            width: 35px;
            height: 35px;
        }

        #is-login > div span {
            color: #646e7b;
            font-weight: 600;
            font-size: 20px;
        }

        #houseInfo {
            width: 100%;
            height: 222px;
        }

        .center {
            text-align: center;
        }

        #housePrice {
            font-size: 38px;
            color: #f95d02;
        }

        #houseName {
            font-size: 45px;
            line-height: 1.2;
            color: #24376d;
            font-weight: 700;
            font-family: initial;
        }

        #houseAddress {
            color: #72809D;
            font-size: 15px;
            font-family: 'Muli', sans-serif;
            font-weight: 400;
            display: inline-block;
        }

        #map-icon {
            color: #00CC00;
        }

        #houseMoreInfo {
            width: 600px;
            display: inline-block;
        }

        #hinf {
            width: 600px;
            flex: 0 0 50%;
            display: flex;
            flex-flow: column;
            flex-wrap: wrap;
            font-size: 13px;
            color: #546cb1;
            margin-bottom: 1.2rem;
            line-height: 1.5;
            background-color: white;
            border-radius: 5px;
        }

        .div-title {
            margin-top: 3%;
            margin-bottom: 20px;
            margin-left: 40px;
            font-weight: 700;
            font-size: 20px;
            font-family: 'Muli', sans-serif;
            color: #140c40;
        }

        #hinf-ul {
            padding: 0;
            display: flex;
            flex-wrap: wrap;
            width: 100%;
            justify-content: space-between;
        }

        #hinf-ul li {
            width: 200px;
            margin-bottom: 20px;
            margin-left: 40px;
            margin-right: 60px;

        }

        #hinf-ul strong {
            color: #140c40;
        }

        #hinf-ul strong {
            font-size: 15px;
        }

        #houseImgs {
            width: 600px;
            background-color: white;
            margin-top: 30px;
            border-radius: 5px;
            margin-bottom: 50px;
            padding-top: 5px;
            position: relative;
            overflow: hidden;
        }

        #selectHouse {
            width: 1170px;
            margin: 0 auto;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;

        }

        #houseImgs-lay {
            overflow: hidden;
            width: 600px;
            margin-left: 30px;
        }

        .project-list-item-cover {
            width: 28%;
            margin-left: 10px;
            margin-bottom: 10px;
            padding: 0;
        }

        #orderHouse {
            width: 400px;
            height: 400px;
            background-color: white;
            border-radius: 5px;
            margin-top: -215px;
        }

        #orderHouse-title {
            width: 400px;
            height: 62px;
            line-height: 62px;
            background-color: #4760FF;
            color: #FFFFFF;
            border-radius: 5px 5px 0 0;
        }

        #orderHouse-title h1 {
            margin-left: 20px;
        }

        .project-list-item-cover02 {
            margin: 0 auto;
            position: absolute;
            width: 800px;
        }

        #left,
        #right {
            background-image: url(${pageContext.request.contextPath}/static/images/icon-slides.png);
            width: 41px;
            height: 69px;
            margin-top: 195px;
            position: absolute;
        }

        #left {
            background-position: -83px;
        }

        #right {
            background-position: -124.5px;
            right: 0;
        }

        #left:hover {
            background-position: 0;
        }

        #right:hover {
            background-position: -41.5px;
        }

        #circle > ul {
            list-style-type: none;
            position: absolute;
            right: 20px;
            bottom: 23px;
        }

        #circle > ul > li {
            border: 2px solid gray;
            height: 6px;
            width: 6px;
            float: left;
            margin-right: 10px;
            /* 倒角 设置边角圆润度 */
            border-radius: 6px;
        }

        #circle > ul > li:hover {
            background-color: gray !important;
        }

        element.style {
            width: 600px;
        }
    </style>
</head>
<body>
<div>
    <div id="mainPage">
        <div id="top">
            <div id="top-div">
                <div id="top-logo">
                    <img src="${pageContext.request.contextPath}/static/images/logo.png">
                </div>
                <div id="top-div-left">
                    <ul id="top-ul-left">
                        <li><a href="main.jsp">首页</a></li>
                        <li><a href="houselist.jsp?houseType=8">整租</a></li>
                        <li><a href="houselist.jsp?houseType=9">合租</a></li>
                    </ul>
                </div>
                <div id="top-div-right">
                    <div id="not-login">
                        <ul id="top-ul-right">
                            <li><img id="log-reg"
                                     src="${pageContext.request.contextPath}/static/images/log-reg.png">
                            </li>
                            <li class="goto-login">
                                <a href="login.jsp">
                                    <span>登陆</span>
                                </a>
                            </li>
                            <li class="goto-login">
                                <a href="register.jsp">
                                    <span>注册</span>
                                </a>
                            </li>
                        </ul>
                    </div>
                    <div class="dropdown-menu" id="is-login">
                        <div>
                            <img style="border-radius: 17px"
                                 src="/images/userimgs/${user.uuidName==null?"1.png":user.uuidName}">
                            <span>${user.userName}</span>
                        </div>
                        <ul class="dropdown-menu-nav">
                            <li><a href="${pageContext.request.contextPath}/backjsp/index.jsp">
                                <i class="layui-icon layui-icon-username"
                                   style="font-size: 20px; color: #555"></i>
                                管理中心</a></li>
                            <li id="login-out"><a>
                                <i class="layui-icon layui-icon-logout"
                                   style="font-size: 20px; color: #555"></i>
                                退出登录
                            </a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <div id="body">
            <div id="houseInfo">
                <br>
                <h2 id="housePrice" class="center housePrice"></h2>
                <h1 id="houseName" class="center houseName"></h1>
                <h3 class="center">
                    <i id="map-icon" class="layui-icon layui-icon-location"></i>
                    <span id="houseAddress" class="houseAddress"></span>
                </h3>
            </div>
            <div id="houselunbotu"
                 style="position: relative;overflow: hidden;

                 /*border: 1px solid red;*/
                 width: 800px;height: 440px;margin: 0 auto 50px ;">
                <div id="lunbotu">
                </div>
                <div id="left"></div>
                <div id="right"></div>
                <div id="circle">
                    <ul style="display: none">
                    </ul>
                </div>
            </div>
            <div id="selectHouse">
                <div id="houseMoreInfo">
                    <div id="hinf">
                        <h3 class="div-title">房屋详细信息</h3>
                        <ul id="hinf-ul">
                            <%--                        <li><strong>房屋状态&nbsp&nbsp:</strong><span>${house.houseStatus}</span></li>--%>
                            <li><strong>房屋名称&nbsp&nbsp:</strong><span class="houseName"></span></li>
                            <li><strong>房屋地址&nbsp&nbsp:</strong><span class="houseAddress"></span></li>
                            <li><strong>房屋租金&nbsp&nbsp:</strong><span class="housePrice"></span></li>
                            <li><strong>房产证编号&nbsp&nbsp:</strong><span class="houseIdCard"></span></li>
                            <li><strong>联系人姓名&nbsp&nbsp:</strong><span class="landlordName"></span></li>
                            <li><strong>联系方式&nbsp&nbsp:</strong><span class="parentInfoPhone"></span></li>
                            <form>
                                <input type="hidden" class="FormHouseId">
                                <input type="hidden" class="FormParentId">
                            </form>
                        </ul>
                    </div>
                </div>
                <div id="houseImgs">
                    <h3 class="div-title">房屋图片信息</h3>
                    <div id="houseImgs-lay">
                        <div class="layui-row layui-col-space30" id="houseImglist"></div>
                    </div>
                </div>
                <div id="orderHouse">
                    <div id="orderHouse-title">
                        <h1 class="housePrice"></h1>
                        <input type="hidden" id="hiddenPrice">
                    </div>
                    <div id="rentMouth" style="margin-top: 20px">
                        <p style="color: #707e9c; margin-left: 30px;
                        font-weight: 500;">您要租赁的月份：</p>
                        <input id="rentTime-in" type="number" value="0"
                               style="width: 320px;border-radius: 5px;
                        margin:30px 30px;line-height: 54px;font-size: 30px;color: grey;
                        height: 54px;border: none; background-color: #F5F7FB">
                    </div>
                    <div>
                        <strong style="margin-left: 30px;font-size: 20px">预付金额:</strong>
                        <span style="font-size: 15px ;color:#f95d02 " id="spendMoney">0</span>
                    </div>
                    <div>
                        <button id="orderHoude-ljyd" class="layui-btn layui-btn-normal"
                                style="width: 320px;height:50px;margin: 30px auto 0 30px;border-radius: 5px">立即预定
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<%--房源图片模板--%>
<script type="text/html" id="houseImgCard">
    <img class="project-list-item-cover"
         src="/images/houseimgs/{{d.houseImg}}"/>
</script>
<%--轮播图--%>
<script type="text/html" id="lunbotuImg">
    <img class="project-list-item-cover02"
         src="/images/houseimgs/{{d.houseImg}}"/>
</script>
<%--轮播图小圆按钮--%>
<script type="text/html" id="lunbotuLi">
    <li></li>
</script>
<!-- 确认订单信息 -->
<script type="text/html" id="orderFormSc">
    <form id="orderForm" action="${pageContext.request.contextPath}/order/alipay" method="post" lay-filter="orderForm" class="layui-form model-form no-padding">
        <input type="hidden" name="tenantId" value="${user.userId}">
        <input type="hidden" name="landlordId">
        <input type="hidden" name="houseId">
        <input type="hidden" name="houseName">
        <div class="model-form-body" style="height: 310px;" onscroll="layui.admin.hideFixedEl();">
            <div class="layui-form-item">
                <div class="layui-form-item">
                    <label class="layui-form-label layui-form-required" style="padding-left: 0;width: 95px">订单号:</label>
                    <div class="layui-input-block">
                        <input name="houseOrderId" placeholder="订单编号" class="layui-input"
                               readonly="readonly"
                               lay-verify="required" lay-verType="tips" required/>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label layui-form-required"
                           style="padding-left: 0;width: 95px">租赁月数:</label>
                    <div class="layui-input-block">
                        <input name="rentTime" type="number" placeholder="租赁时间" class="layui-input"
                               readonly="readonly"
                               lay-verify="required" lay-verType="tips" required/>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label layui-form-required"
                           style="padding-left: 0;width: 95px">租赁金额:</label>
                    <div class="layui-input-block">
                        <input name="orderPrice" type="number" placeholder="订单金额"
                               class="layui-input" readonly="readonly"
                               lay-verify="required" lay-verType="tips" required/>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label layui-form-required">订单时间:</label>
                    <div class="layui-input-block">
                        <input name="createTime" id="createTime" value="222222222" placeholder="订单时间"
                               class="layui-input"
                               autocomplete="off"
                               readonly
                               lay-verify="required" lay-verType="tips" required/>
                    </div>
                </div>
            </div>
            <div class="layui-form-item text-right model-form-footer">
                <button class="layui-btn layui-btn-warm" lay-filter="orderFormSub" lay-submit
                        style="margin-right: 50px">
                    提交
                </button>
                <button class="layui-btn layui-btn-primary" type="button" ew-event="closeDialog"
                        style="margin-right: 30px">
                    取消
                </button>
            </div>
        </div>
    </form>
</script>

<script type="text/javascript" src="${pageContext.request.contextPath}/static/libs/layui/layui.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/static/js/common.js?v=318"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/static/module/cascader/citys-data.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/static/libs/jquery/jQuery.js"></script>

<script>
    // 退出登录
    $('#login-out').click(function () {
        parent.layui.admin.confirm('确认退出吗？', function (index) {
            parent.layer.close(index);
            $.ajax({
                url: "${pageContext.request.contextPath}/user/loginOut",
                type: "post",
                dataType: "json",
                contentType: "application/json;charset=utf-8",
                success: function (res) {
                    if (res.code == 0) {
                        layer.msg(res.msg, {icon: 1}, function () {
                            parent.location.reload();
                        });
                    } else {
                        layer.msg(res.msg, {icon: 2})
                    }
                }
            });
        });
    });
    <%--根据是否登陆显示隐藏div--%>
    var user = "${user}"
    if (user == "") {
        $("#is-login").hide()
        $("#not-login").show()
    } else {
        $("#not-login").hide()
        $("#is-login").show()
    }

    // 获取地址栏的参数值
    function getUrlSearch(name) {
        // 未传参，返回空
        if (!name) return null;
        // 查询参数：先通过search取值，如果取不到就通过hash来取
        var after = window.location.search;
        after = after.substr(1) || window.location.hash.split('?')[1];
        // 地址栏URL没有查询参数，返回空
        if (!after) return null;
        // 如果查询参数中没有"name"，返回空
        if (after.indexOf(name) === -1) return null;
        var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)');
        // 当地址栏参数存在中文时，需要解码，不然会乱码
        var r = decodeURI(after).match(reg);
        // 如果url中"name"没有值，返回空
        if (!r) return null;
        return r[2];
    }

    //提示需要支付的金额
    $("#rentMouth>input").blur(function () {
        var price = $("#hiddenPrice").val()
        var mouth = $("#rentTime-in").val();
        sessionStorage.setItem("mouth", mouth)
        $("#spendMoney").html(price * mouth)
    })

    //生成指定位数随机数，设置为订单编号
    function getRandom(num) {
        var random = Math.floor((Math.random() + Math.floor(Math.random() * 9 + 1)) * Math.pow(10, num - 1));
        return random
    }

    //获取当前时间
    function nowTime() {
        var now = new Date();
        var year = now.getFullYear(); //得到年份
        var month = now.getMonth() + 1;//得到月份
        var date = now.getDate();//得到日期
        // var day = now.getDay();//得到周几
        var hour = now.getHours();//得到小时数
        var minute = now.getMinutes();//得到分钟数
        var second = now.getSeconds();//得到秒数
        var nowTime = year + "-" + month + "-" + date + " " + hour + ":" + minute + ":" + second;
        return nowTime
    }

    console.log(nowTime())
    layui.use(['form', 'cascader', 'table', 'laydate', 'layer', 'dataGrid', 'element', 'dropdown', 'layer', 'admin', 'fileChoose'], function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var dataGrid = layui.dataGrid;
        var admin = layui.admin;
        var form = layui.form;
        var laydate = layui.laydate;
        var houseId = getUrlSearch("houseId")

        var href = '${pageContext.request.contextPath}/house/getHouseAllById?houseId=' + houseId

        <%--发送ajax获取数据渲染页面--%>
        $.ajax({
            url: href,
            data: {"houseId": houseId},
            dataType: 'json',
            type: 'post',
            success: function (res) {
                if (res.code == 0) {
                    <%--console.log("address" +${house.houseName})--%>
                    <%--给数据赋值--%>
                    $(".houseName").html(res.data.houseName)
                    $(".houseAddress").html(res.data.houseAddress)
                    $(".housePrice").html("￥" + res.data.housePrice + "/月")
                    $("#hiddenPrice").val(res.data.housePrice)
                    $(".houseIdCard").html(res.data.houseIdCard)
                    $(".landlordName").html(res.data.parentInfo.nickName)
                    $(".parentInfoPhone").html(res.data.parentInfo.phone)
                    $(".FormParentId").val(res.data.parentId)
                    $(".FormHouseId").val(res.data.houseId)
                    if (res.data.houseStatus !="7"){
                        $("#orderHoude-ljyd").attr('disabled', true).html("已被预定或租赁");
                    }
                    //生成房屋图片
                    dataGrid.render({
                        elem: '#houseImglist',
                        templet: '#houseImgCard',
                        data: res.data.houseImgs,
                    });
                    //生成轮播图图片
                    dataGrid.render({
                        elem: '#lunbotu',
                        templet: '#lunbotuImg',
                        data: res.data.houseImgs,
                    });
                    //生成轮播图小圆点
                    dataGrid.render({
                        elem: '#circle>ul',
                        templet: '#lunbotuLi',
                        data: res.data.houseImgs,
                    });
                    // 中间轮播图
                    var index = 0
                    // changed()
                    // 设置小圆点
                    $("#circle>ul>li").click(function () {
                        index = $(this).index()
                    })
                    // 设置左右箭头
                    $("#left").click(function () {
                        index--;
                        if (index == -1) {
                            index = res.data.houseImgs.length-1
                        }
                    })
                    $("#right").click(function () {
                        index++;
                        if (index == res.data.houseImgs.length) {
                            index = 0
                        }
                    })
                    document.querySelector("#houselunbotu").onclick = function () {
                        changed()
                    }

                    function changed() {
                        $("#circle>ul>li").eq(index).css('background-color', 'grey').siblings().css('background-color', 'white')
                        $("#lunbotu>img").eq(index).fadeIn().siblings().fadeOut();
                    }

                } else {
                    layer.msg(res.msg, {icon: 2, anim: 6});
                }
            },
            error: function () {
                layer.msg('请求失败');
            }
        })
        $('#orderHoude-ljyd').click(function () {
            if (user == "") {
                layer.msg('请先登录');
            } else {
                if ("${user.roleId}" == 3) {
                    if ($("#rentTime-in").val() < 1) {
                        layer.msg('租赁时间过短!');
                    } else {
                        admin.open({
                            type: 1,
                            title: '确认订单信息信息',
                            fixed: true,
                            offset: 'auto',
                            content: $('#orderFormSc').html(),
                            success: function (layero, dIndex) {
                                $("input[name='createTime']").val(nowTime())
                                $("input[name='orderPrice']").val(($("#spendMoney").html()))
                                $("input[name='rentTime']").val(($("#rentTime-in").val()))
                                $("input[name='houseOrderId']").val(getRandom(15))
                                $("input[name='houseId']").val($(".FormHouseId").val())
                                $("input[name='houseName']").val($("#houseName").html())
                                $("input[name='landlordId']").val($(".FormParentId").val())
                                // 表单提交事件
                                form.on('submit(orderFormSub)', function (data) {
                                    return true;
                                    $.ajax({
                                        url: "${pageContext.request.contextPath}/order/addOrder",
                                        data: data.field,
                                        dataType: 'json',
                                        type: 'post',
                                        success: function (res) {
                                            if (res.code == 0) {
                                                layer.msg(res.msg, {icon: 1, time: 1500}, function () {
                                                    layer.closeAll()
                                                });
                                            } else {
                                                layer.msg(res.msg, {icon: 2, time: 1500}, function () {
                                                });
                                            }

                                        }
                                    })
                                    return false;
                                });

                            }
                        });
                    }
                } else {
                    layer.msg('只有租客可以租赁房屋!');
                }
            }
        });
    })
</script>

</body>
</html>
